<template>
  <div class="warning_container">
    <!-- 标题 -->
    <div class="top_box">
      <span class="warning_title">报 警 信 息</span>
      <span class="open_warning_details" @click="openWarningDetails"
        >查看详情</span
      >
    </div>
    <!-- 内容 -->
    <div class="warning_content">
      <div class="warning_contents">
        <el-table
          :data="warningData"
          border
          fit
          highlight-current-row
          @row-contextmenu="rowContextmenu"
          @row-dblclick="dblClickRow"
        >
          <!-- {"ID":35524,"VID":15062,"LICENSE_PLATE":"津CA5151(张贵庄)","SIMCARD_NO":"064882278979","TYPE":2,"TIME":"2021-05-25T11:42:50","LONGITUDE":117.34970283267484,"LATITUDE":39.079138445187745,"SPEED":0.0,"FLENGTH":null,"FOFFSET":null,"FPATH":null,"cmsserver":null} -->
          <el-table-column
            prop="LICENSE_PLATE"
            label="车辆"
            min-width="35%"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="TYPENAME"
            label="报警类型"
            min-width="30%"
            align="center"
          ></el-table-column>
          <el-table-column
            sortable
            prop="TIME"
            label="报警时间"
            min-width="35%"
            align="center"
          ></el-table-column>
          <el-table-column label="监控截图" width="100px" align="center">
            <template slot-scope="scope">
              <el-image
                style="width: 40px; height: 40px"
                :src="scope.row.image"
                @click="bigImage(scope.row)"
              >
              <div slot="error" class="image-slot" style="margin-top: 10px">
                <!-- <i class="el-icon-picture-outline"></i> -->
               </div></el-image>
            </template>
          </el-table-column>
          <!-- <el-table-column prop="LONGITUDE" label="经度" align="center" width="120" :formatter="formatter"></el-table-column> -->
          <!-- <el-table-column prop="LATITUDE" label="纬度" align="center" width="120" :formatter="formatter"></el-table-column> -->
        </el-table>
      </div>
      <!-- <div class="pages">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-size="pageSize"
        layout="prev, pager, next"
        :total="warningData.length"
      ></el-pagination>
    </div> -->
    </div>

    <div
      class="rowContextmenu"
      v-if="rowMenu.isShow"
      :style="`top: ${rowMenu.top}px; left: ${rowMenu.left}px`"
    >
      <span @click="exportExcel">导出Excel</span>
      <span>解除报警</span>
      <span>删除图标</span>
    </div>
    <!-- <el-dialog
      title="图片展示"
      :visible.sync="showBigDialogVisible"
      width="30%"
    >
      <el-image style="width: 100%; height: 100%" :src="srcBig"></el-image>
    </el-dialog> -->
    <el-dialog
     v-dialogDrag
      title="报警图片展示"
      :visible.sync="showBigDialogVisible"
      width="22.646vw"
      height="22.646vw"
      :close-on-click-modal="false"
    >
      <img :src="itemImageSrc" style="height: 100%; width: 100%" alt="图片丢失了" />
      <div style="margin:10px; text-align:center">
      <el-button  type="primary" round   @click="setActiveItem(0)" > 1</el-button>
      <el-button  type="primary"  round   @click="setActiveItem(1)" > 2</el-button>
      <el-button  type="primary"  round   @click="setActiveItem(2)" > 3</el-button>
      </div>
    </el-dialog>
    <el-dialog
      title="报警信息详情"
      :visible.sync="showDetailDialogVisible"
      width="80%"
    >
      <div>
        <el-row :gutter="12">
          <el-col :span="6">
            <el-form ref="form" :model="form">
              <el-form-item label="开始日期：">
                <el-date-picker
                  v-model="form.StartDate"
                  type="date"
                  placeholder="选择日期"
                  value-format="yyyy-MM-dd"
                ></el-date-picker>
              </el-form-item>
              <el-form-item label="结束日期：">
                <el-date-picker
                  v-model="form.EndDate"
                  type="date"
                  placeholder="选择日期"
                  value-format="yyyy-MM-dd"
                ></el-date-picker>
              </el-form-item>
            </el-form>
          </el-col>
          <el-col :span="6">
            <el-form ref="form" :model="form">
              <!-- <el-form-item label="车辆分组：">
              <el-select v-model="form.groupingValue" placeholder="请选择" @change="changeCarGrouping">
                <el-option
                  v-for="item in form.groupingList"
                  :key="item.CLIENT_NO"
                  :label="item.CLIENT_NAME"
                  :value="item.CLIENT_NO"
                ></el-option>
              </el-select>
            </el-form-item> -->
              <el-form-item label="车牌号码：">
                <el-select
                  v-model="form.cph"
                  placeholder="请选择"
                  filterable
                  clearable
                >
                  <el-option
                    v-for="item in form.cphList"
                    :key="item.index"
                    :label="item.LICENSE_PLATE"
                    :value="item.LICENSE_PLATE"
                  ></el-option>
                </el-select>
              </el-form-item>

              <!-- </el-form>
        </el-col>
        <el-col :span="6">
          <el-form ref="form" :model="form"> -->

              <el-form-item label="报警类型：">
                <el-select v-model="form.alermTypeValue" placeholder="请选择">
                  <el-option
                    v-for="item in form.alermTypeList"
                    :key="item.label"
                    :label="item.label"
                    :value="item.label"
                  ></el-option>
                </el-select>
              </el-form-item>
              <!-- <el-form-item label="处理状态：">
              <el-select v-model="form.cph" placeholder="请选择">
                <el-option
                  v-for="item in form.cphList"
                  :key="item.index"
                  :label="item.LicensePlate"
                  :value="item.LicensePlate"
                ></el-option>
              </el-select>
            </el-form-item> -->
            </el-form>
          </el-col>
          <el-col :span="6">
            <el-form ref="form" :model="form" style="float: right">
              <el-button
                size="mini"
                type="primary"
                @click="getWarningDetailList"
                >查 询</el-button
              >
              <el-button size="mini" type="success" @click="exportExcel"
                >导 出</el-button
              >
            </el-form>
          </el-col>
        </el-row>
      </div>
      <el-table
        v-loading="loading"
        :data="
          tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)
        "
      >
        <el-table-column
          prop="VID"
          label="车辆ID"
          align="center"
          width="100"
        ></el-table-column>
        <el-table-column
          prop="LICENSE_PLATE"
          label="车辆名称"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="TYPENAME"
          label="报警类型"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="LOCATION"
          label="地址"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="TIME"
          label="时间"
          align="center"
          width="170"
        ></el-table-column>
        <el-table-column
          prop="SPEED"
          label="当时时速"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="开始出行时间"
          label="处理状态"
          align="center"
          width="170"
        ></el-table-column>
        <el-table-column
          prop="结束出行时间"
          label="确认人员"
          align="center"
          width="170"
        ></el-table-column>
        <el-table-column
          prop="出行总时长分钟"
          label="确认时间"
          align="center"
        ></el-table-column>
        <!-- <el-table-column label="操作" width="100">
        <template slot-scope="scope">
          <el-button type="text" icon="el-icon-info" @click="handleEdit(scope.$index, scope.row)">详情</el-button>
        </template>
      </el-table-column>-->
      </el-table>
      <div class="pagination">
        <el-pagination
          background
          layout="total, sizes, prev, pager, next, jumper"
          :current-page="currentPage"
          :page-size="pageSize"
          :total="tableData.length"
          @size-change="handleSizeChange"
          @current-change="handlePageChange"
        ></el-pagination>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import '@/assets/css/common.css'
import eventBus from '@/eventBus.js'
import export2Excel from '@/utils/exportExcel/index.js'
import { formatDate } from '@/common/js/date.js'
// import { float } from 'html2canvas/dist/types/css/property-descriptors/float'
export default {
  data () {
    return {
      itemImageSrc: "", 
      warningDataYX: [], 
      warningData: [],
      warningDetailList: [],
      rowMenu: {
        top: 0,
        left: 0,
        isShow: false
      },
      row: null,
      personWarning: null,
      dialogFormVisiblePayment: false,
      formLabelWidth: "100px",
      showBigDialogVisible: false,
      srcBig: '',
      imageList: [],
      // 报警详情窗口
      showDetailDialogVisible: false,
      currentPage: 1, // 当前页码
      pageSize: 10, // 每页的数据条数
      loading: false,
      originalData: [],
      tableData: [],
      form: {
        groupingList: [],
        groupingValue: '',
        cphList: [],//车牌号列表
        cph: '全部',//车牌号
        alermTypeList: [
          { label: '全部', value: '0' },
          { label: '超速报警', value: '1' }, 
          { label: '停留报警', value: '2' }, 
          { label: '出区域报警', value: '3' },
          { label: '超时作业报警', value: '4' }, 
          { label: '休息未达标报警', value: '5' }, 
          { label: '疲劳驾驶报警', value: '6' },
          { label: '抛冒撒漏报警', value: '8' },
          { label: '未定义报警类型', value: '9' }, ],
        alermTypeValue: '全部',
        StartDate: formatDate(new Date(new Date() - 3600 * 1000 * 24), 'yyyy-MM-dd'),
        EndDate: formatDate(new Date(), 'yyyy-MM-dd'),
      },
      containerHeight: 0,
    }
  },
    mounted () {

    this.containerHeight = document.querySelector('.el-container').clientHeight
  },
  created () {
    this.getWarningList()
    this.getSelectCarList()
  },
  methods: {

    // 报警信息
    async getWarningList () {
      // var url = 'RubbishVehicle/GetAlarmInfo?StartDate=&EndDate=&TopNum=200&ClientNo=' + localStorage.getItem('CLIENT_NO')
      var url = 'Vehicle/GetAlarmInfoForImage?type=垃圾&TopNum=200&ClientNo=' + localStorage.getItem('CLIENT_NO')
      
      const { data } = await this.$Http.get(url)
      
      // data.slice(0,20)
      // var indexImage = 0;
      // var points = [];  // 添加海量点数据
      // var pointsDict = {};
      data.forEach(element => {
        // points.push(new BMap.Point(element.LONGITUDE, element.LATITUDE));
        // pointsDict[element.LONGITUDE] = element

        switch (element.TYPE) {
          case 1:
            element.TYPENAME = "超速报警";
            break;
          case 2:
            element.TYPENAME = "停留报警";
            break;
          case 3:
            element.TYPENAME = "出区域报警";
            break;
          case 4:
            element.TYPENAME = "超时作业报警";
            break;
          case 5:
            element.TYPENAME = "休息未达标报警";
            break;
          case 6:
            element.TYPENAME = "疲劳驾驶报警";
            break;
            case 8:
            element.TYPENAME = "抛冒撒漏报警";
            break;
          default:
            element.TYPENAME = "未定义报警类型";
            break;
        }
        element.TIME = element.TIME.replace('T', ' ')
        element.image = element.DETAIL.split(';')[0]

        
      });
      this.warningData = data
      eventBus.$emit('mapDataAlert', this.warningData)
      // eventBus.$emit('mapDictAlert', pointsDict)
      // eventBus.$emit('mapPointsCollection_SEA_Alert', points)

    },
    // 报警详情信息
    async getWarningDetailList () {
      // async getlistdata () {
      this.loading = true
      // var url = 'Vehicle/GetAlarmInfo?ClientNo=0000009&TopNum=50&StartDate=2021-06-01&EndDate=2021-06-10'
      var url = 'RubbishVehicle/GetAlarmInfo?StartDate=' + this.form.StartDate + '&EndDate=' + this.form.EndDate + ' 23:59&TopNum=5000&ClientNo=' + localStorage.getItem('CLIENT_NO')
      const { data } = await this.$Http.get(url)
      data.forEach(element => {
        element.TIME = element.TIME.replace('T', ' ')
        switch (element.TYPE) {
          case 1:
            element.TYPENAME = "超速报警";
            break;
          case 2:
            element.TYPENAME = "停留报警";
            break;
          case 3:
            element.TYPENAME = "出区域报警";
            break;
            case 4:
            element.TYPENAME = "超时作业报警";
            break;
          case 5:
            element.TYPENAME = "休息未达标报警";
            break;
          case 6:
            element.TYPENAME = "疲劳驾驶报警";
            break;
            case 8:
            element.TYPENAME = "抛冒撒漏报警";
            break;
          default:
            element.TYPENAME = "未定义报警类型";
            break;
        }
      });
      // 原始数据
      this.originalData = data
      // console.log(data)
      this.loading = false
      this.personQuery()
    },
    // 筛选报警详情列表
    personQuery () {
      this.currentPage = 1;
      this.tableData = this.originalData
      // const { name, client } = this.form
      if (this.form.cph != '全部') this.tableData = this.tableData.filter(item => item.LICENSE_PLATE.includes(this.form.cph))
      if (this.form.alermTypeValue != '全部') this.tableData = this.tableData.filter(item => this.form.alermTypeValue === item.TYPENAME)
    },
    // 获得车辆分组列表
    // async getCarGroupingList () {
    //   var url = 'Vehicle/GetGroupList?ClientNo=' + localStorage.getItem('CLIENT_NO') // zxdata
    //   let { data } = await this.$Http.get(url)
    //   this.form.groupingList = data
    // },
    // changeCarGrouping () {
    // },
    async getSelectCarList () {
      var url = 'RubbishVehicle/GetVehicleCarListSelect?ClientNo=' + localStorage.getItem('CLIENT_NO')
      const { data } = await this.$Http.get(url)
      this.form.cphList = data
    },
    // 打开报警详情
    openWarningDetails () {
      this.showDetailDialogVisible = true
      this.getWarningDetailList()
      // eventBus.$emit('warningDetails', true)
    },
    // 右键某一行
    rowContextmenu (row, column, event) {
      this.row = row
      window.event.returnValue = false
      this.rowMenu.isShow = true
      this.rowMenu.top = event.clientY
      this.rowMenu.left = event.clientX
      const x = document.body.clientWidth - event.clientX
      if (x < 100) this.rowMenu.left = event.clientX - 100
    },
    // 双击某一行
    dblClickRow (row, column, event) {
      eventBus.$emit('warningItem', row)
      // this.getWarningDetail(row.ID, row.LONGITUDE, row.LATITUDE)
    },
    // 放大图片
    bigImage (row) {
      // this.srcBig = row.image
      // this.showBigDialogVisible = true

      // this.getSelectCarList(row.ID)
      this.imageList = row.DETAIL.split(';')
      if (this.imageList.length > 0) {
        this.itemImageSrc = this.imageList[0]
        this.showBigDialogVisible = true
      }
      
    },
    // 切换图片
    setActiveItem:function(index){
      if (index == 0) {
        this.itemImageSrc =this.imageList[0]
      }
      else if (index == 1) {
         this.itemImageSrc =this.imageList[1]
      }
      else if (index == 2) {
         this.itemImageSrc =this.imageList[2]
      }
    },
    // async getSelectCarList (id) {
    //   var url = 'Vehicle/GetAlarmPhotoList?alarmID=' + id
    //   const { data } = await this.$Http.get(url)
    //   this.imageList = data
    //   this.showBigDialogVisible = true
    // },
    // 报警详情信息
    // async getWarningDetail (alarmID, alarmLON, alarmLAT) {
    //   var url = '/DataListCompany/GetVehicleAlarmDetailCCApi?CLIENT_NO=' + localStorage.getItem('CLIENT_NO') + '&NUM=100&ID=' + alarmID
    //   const { data } = await this.$Http.get(url)
    //   const val = data[0]
    //   val["LONGITUDE"] = alarmLON
    //   val["LATITUDE"] = alarmLAT
    //   eventBus.$emit('warningItem', val)
    // },
    // 导出Excel
    exportExcel () {
      // this.rowMenu.isShow = false
      const excelName = '报警信息'
      const tHeader = ['车辆ID', '车辆名称', '报警类型', '报警位置', '报警时间', '当时时速', '处理状态', '确认人员', '确认时间']
      const filterVal = ['VID', 'LICENSE_PLATE', 'TYPENAME', 'LOCATION', 'TIME', 'SPEED', '', '', '']
      // const ary = []
      // ary.push(this.row)
      export2Excel(tHeader, filterVal, this.tableData, excelName)
    },
    // 分页导航
    handlePageChange (currentPage) {
      this.currentPage = currentPage;
      // console.log(this.currentPage)
      // this.$set(this.query, 'pageIndex', val);
      // this.getData();
    },
    handleSizeChange (size) {
      this.pageSize = size;
      console.log(this.pageSize)
    },
  }
}
</script>

<style scoped lang="less">
.warning_container {
  // width: 100%;
  // height: 100%;
  height: calc(~'100% - 8px');
  height: calc(~'100% - 8px');
  border: 4px solid #007acc;
}
.top_box {
  background-color: #fff;
  height: 36px;
  line-height: 30px;
  border-bottom: 2px solid #007acc;
  border-top: 2px solid #007acc;
  padding-left: 66px;
  display: flex;
  align-items: center;
  .iconfont {
    cursor: pointer;
  }
  .warning_title {
    margin: 0 auto;
    font-weight: bold;
    cursor: default;
  }
  .open_warning_details {
    float: right;
    margin-right: 10px;
    color: #666;
    cursor: pointer;
    &:hover {
      color: #007acc;
    }
  }
}

.warning_content {
  display: flex;
  height: calc(~'100% - 40px');
  .warning_contents {
    width: 100%;
    // overflow-x: hidden;
    // overflow-y: auto;
    .el-table {
      height: 100%;
      width: 100%;
    }
    /deep/.el-table__body-wrapper {
      height: calc(~'100% - 33px');
      overflow-y: auto;
    }
  }
}
.details {
  width: 600px;
  height: 400px;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  position: fixed;
  z-index: 99;
}
.rowContextmenu {
  width: 100px;
  height: 78px;
  background-color: #f3f3f3;
  border: 1px solid #ccc;
  position: absolute;
  z-index: 999;
  span {
    display: block;
    text-align: center;
    line-height: 26px;
    font-size: 12px;
    cursor: default;
    &:hover {
      background-color: #007acc;
      color: #fff;
    }
  }
}
</style>
